<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>今日优选</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">
    <style type="text/css">
	.swiper-container {
      width: 100%;
      height: 100%;
    }
    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }
    .swiper-slide img{width: 100%;}
    .con{text-align: center;}
    .page{background: #fff;}
    .tkl{text-align: center;padding: 1rem 10%;}
    .tkl span{background: #eee;padding: 1rem;border-radius: 5px;display: block;}
    .con h5{text-align: left;padding: 0 5%;}
    </style>
  </head>
  <body>
    <div class="page-group">
        <div class="page page-current">
            <div class="content-padded">
                <!-- Slider -->
                <div class="banner" style="height: 15rem;">
                	<div class="swiper-container" data-space-between='10'>
					    <div class="swiper-wrapper">
					    	{volist name="info.pics" id="vo"}
					      	<div class="swiper-slide"><img src="{$vo}" alt=""></div>
					      	{/volist}
					    </div>
					    <div class="swiper-pagination"></div>
					</div>
                </div>
				  
				<div class="con">
					<p><h5>{$info.title}</h5></p>
					<p class="tkl"><span>{$info.tkl}</span></p>
					<p style="padding:0 20%;"><a href="javascript:;"  data-clipboard-text="{$info.tkl}"  class="button button-fill button-danger button-big itemCopy">一键复制</a></p>
					<p style="font-size: .6rem;">长按复制上方口令，打开手机淘宝购买</p>
				</div>
        	</div>
	    </div>
	</div>

<script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>
<script src="https://cdn.bootcss.com/clipboard.js/1.7.1/clipboard.min.js"></script>
<script src="https://cdn.bootcss.com/layer/3.1.0/mobile/layer.js"></script>
<script type="text/javascript">
   $(function() {
   		var config = {
		    //speed: 400,
		    //spaceBetween: 100,
		}
	    $(".swiper-container").swiper(config);
	    //复制文本
        var clipboard = new Clipboard('.itemCopy');
        clipboard.on('success',function(e){
            layer.open({
			    content: '复制成功'
			    ,skin: 'msg'
			    ,time: 1.5 //2秒后自动关闭
			    ,anim: false
			});
        });
        clipboard.on('error',function(e) {
        	layer.open({
			    content: '您的浏览器不支持复制功能，请手动复制框内内容'
			    ,skin: 'msg'
			    ,time: 1.5 //2秒后自动关闭
			    ,anim:false
			});
        });
   });
</script>
  </body>
</html>